<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp"%>

<script src="${ctx}/assets/js/jquery.validate.js"></script>

<script type="text/javascript" src="${ctx}/assets/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/plupload/jquery.plupload.queue.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/plupload/i18n/zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/fnReloadAjax.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/drag.js"></script>
<%-- <script src="${ctx}/assets/js/ajaxfileupload.js"></script> --%>
<%-- <script src="${ctx}/assets/js/fileinput.js"></script>
<script src="${ctx}/assets/js/fileinput.min.js"></script>
<script src="${ctx}/assets/css/fileinput.min.css"></script> --%>
<!--[if lte IE 9]>
  <link rel="stylesheet" href="${ctx}/assets/css/ace-ie.css" />
<![endif]-->

<style type="text/css">
*{margin: 0;padding: 0}
.qrcode { width: 200px; height: 200px; cursor: move; position: absolute; top: 0; left: 0; background-color: #FFF; border: 1px solid #CCCCCC; position: absolute;top:0;left: 0}
#coor { width: 10px; height: 10px;cursor: se-resize; position: absolute; right: 0; bottom: 0;background: #555;opacity: 0.5}
</style>
<script>
	var scripts = [ null, null ];
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
		initButtons();
	});
	function initButtons() {
		if ("${operFlag}" == "detail") {
			
			
			$("#uploadfile").hide();
			$("#downfile").show();
			$("#btnPModify").show();
			$("#btnPSave").hide();
			$("#btnPDelete").hide();
			$("#btnPCancle").hide();
			$("#btnPClose").show();
			disabledAll("productDetailForm");
			
			var cflag="${product.channelFlag}";
			var arry=cflag.split(",");
			$.each(arry,function(i,v){
				if(v=="0"){
					$("#office").attr("checked","checked");
				}
				if(v=="1"){
					$("#person").attr("checked","checked");
				}
				if(v=="2"){
					$("#others").attr("checked","checked");
				}
			})
		} else {
			$("#downfile").hide();
			$("#uploadfile").show();
			$("#btnPModify").hide();
			$("#btnPSave").show();
			$("#btnPDelete").hide();
			$("#btnPCancle").hide();
			$("#btnPClose").show();

		}
		//只有未启用的状态才显示删除按钮
		if ($("#status").val() != "0") {
			$("#btnPDelete").hide();
		}

	}

	//新增和修改
	function save() {

		enabledAll("productDetailForm");
		$("#productDetailForm").validate({
			errorElement : 'div',
			errorClass : 'help-block',
			focusInvalid : false,
			rules : {
				productName : {
					required : true
				},
				productCode : {
					required : true
				},
				status : {
					required : true
				}
			},

			messages : {
				productName : {
					required : "产品名称不能为空！"
				},
				productCode : {
					required : "产品编码不能为空！"
				},
				status : {
					required : "产品状态不能为空！"
				}
			},

			highlight : function(e) {
				$(e).closest('.form-group').removeClass('has-info')
						.addClass('has-error');
			},

			success : function(e) {
				$(e).closest('.form-group').removeClass('has-error')
						.addClass('has-info');
				$(e).remove();
			},

			errorPlacement : function(error, element) {
				error.insertAfter(element.parent());
			}
		});
		if ($("#productDetailForm").valid() == false) {
			return;
		}
		if ("${product.productId}" == "") {
			$.ajax({
				url : "${ctx}/product/insert",
				async : false,
				data : $("#productDetailForm").serialize(),
				type : "POST",
				dataType : "json",
				success : function(ret) {
					if (ret[0] == "ok") {
						//返回当前id,上传文件更新文件名
						alert(ret[1]);
						$("#productDetailIframe").dialog("close");
						$("#productList").load(
								"${ctx}/product/list.do?temp="
										+ new Date().getTime());
					} else {
						alert(ret[1]);
					}
				},
				error : function(ret) {
					alert(ret.responseText);
					disabledAll("productDetailForm");
				}
			});
		} else if ("${product.productId}" != "") {
			$.ajax({
				url : "${ctx}/product/update",
				async : false,
				data : $("#productDetailForm").serialize(),
				type : "POST",
				dataType : "json",
				success : function(ret) {
					if (ret[0] == "ok") {
						alert(ret[1]);
						initButtons();
						$("#productDetailIframe").dialog("close");
						$("#productList").load("${ctx}/product/list.do?temp=" + new Date().getTime());
					} else {
						alert(ret[1]);
					}
				},
				error : function(ret) {
					alert(ret.responseText);
					disabledAll("productDetailForm");
				}
			});
		}
	}

	function modify() {
		$("#downfile").hide();
		$("#uploadfile").show();
		$("#btnPModify").hide();
		$("#btnPSave").show();
		$("#btnPDelete").hide();
		$("#btnPCancle").show();
		$("#btnPClose").show();
		enabledAll("productDetailForm");
		/* $("#productName").attr("disabled",false);
		$("#orgId").attr("disabled",false);
		$("#status").attr("disabled",false);
		$("#url").attr("disabled",false); */
	}

	function cancle() {
		if ($("#productId").val() == "") {
			var iscancle = window.confirm("确定取消？");
			if (iscancle == true) {
				$('#productDetailIframe').hide();
			} else {
				return;
			}
		}
		if ($("#productId").val() != "") {
			var iscancle = window.confirm("确定取消修改？");
			if (iscancle == true) {
				/* $("#productName").attr("disabled",false);
				$("#orgId").attr("disabled",false);
				$("#status").attr("disabled",false);
				$("#url").attr("disabled",false); */
				$("#productName").attr("value", $("#productName").val());
				$("#orgId").attr("value", $("#orgId").val());
				$("#status").attr("value", $("#status").val());
				$("#url").attr("value", $("#url").val());
			} else {
				return;
			}
			initButtons();
			$("#menuModify").show();
			$("#modify").show();
		}

		$("#productDetailForm")[0].reset();
	}
</script>
<body id="dragBody">
<div class="row">
	<div class="col-xs-12">
		<form id="productDetailForm" name="productDetailForm"
			class="form-horizontal" role="form">
			<div class="row">

				<input type="hidden" name="productId" id="productId" value="${product.productId}" />
				<div class="form-group col-sm-12">
					<label class="col-sm-3 control-label no-padding-right" for="productName">产品名称：<font color="red">*</font></label>
					<div class="col-sm-9">
					  <div class="clearfix">
					   <input type="text" class="col-xs-10 col-sm-8 required"  name="productName" id="productName" value="${product.productName}" maxlength="40" />
					  </div>
					</div>
		  		</div>
				<div class="form-group col-sm-12">
					<label class="col-sm-3 control-label no-padding-right" for="productCode">产品编码：<font color="red">*</font></label>
					<div class="col-sm-9">
					  <div class="clearfix">
					   <input type="text" class="col-xs-10 col-sm-8 required"  name="productCode" id="productCode" value="${product.productCode}" maxlength="40" />
					  </div>
					</div>
		  		</div>
		  		<div class="form-group col-sm-12">
					<label class="col-sm-3 control-label no-padding-right" for="channelFlag">url：<font color="red">*</font></label>
					<div class="col-sm-9">
						<div class="clearfix">
							<input type="text" class="col-xs-10 col-sm-8 required" name="url" value="${product.url}" id="url"/>
						</div>
					</div>
				</div>
				<div class="form-group col-sm-12">
					<label class="col-sm-3 control-label no-padding-right" for="status">产品状态：<font color="red">*</font></label>
					<div class="col-sm-9">
					  <div class="clearfix">
						<select class="col-xs-10 col-sm-8" id="status" name="status">
						      <hw:dictOption dictType="KHWH00014" value="${product.status}" nullLable="no"/>
						</select>
					</div>
					</div>
				</div>
				<div class="form-group col-sm-12">
					<label class="col-sm-3 control-label no-padding-right" for="channelFlag">渠道：<font color="red">*</font></label>
					<div class="col-sm-9">
						<div class="clearfix">
							<input type="checkbox"  name="channelFlag" value="0" id="office"/>官方渠道&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="checkbox"  name="channelFlag" value="1" id="person"/>个人渠道&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="checkbox"  name="channelFlag" value="2" id="others"/>第三方渠道
						</div>
					</div>
				</div>
				<!-- <div class="form-group col-sm-12">
					<label class="col-sm-3 control-label no-padding-right" for="image">上传图片：<font color="red">*</font></label>
					
					  <div class=" col-sm-1  no-padding-right"></div>
					  <label  for='imgFileInput' class=" col-sm-2  btn btn-sm btn-success no-padding-right"  type="button" id="importBtn">
						<i class="ace-icon fa fa-cloud-upload bigger-110"></i> 上传图片
					  </label>
					<div class="col-sm-9"></div>
				</div> -->
			</div>
		</form>
	</div>
</div>
<%-- <div class="clearfix " style="margin-left: 25%;margin-top:-50px">
    <input name="uploadImgFile" id="imgFileInput" type="file" style="display: none;">
    <div id='container'  style="height:400px;width:300px;position:relative;background:#f5f5f5">
		<div id="qrcode" class="qrcode" style="background: url('${ctx}/assets/images/qrcode.png'); background-size: 100% 100%">
			<div id="coor"></div>
		</div>
		<div class='promptInfo' style="width:100%;text-align:center;font-size:16px;position:absolute;top:40%">
			请上传图片，拖动二维码，配置场景
		</div>
	</div>
	<img src="" class='getImgInfo' style="display:none;"/>
</div> --%>
</body>
<script>
	/* $("#imgFileInput").change(function(){
		var objUrl = getObjectURL(this.files[0]);
		if (objUrl) {
			$("#container").css({'background':'url('+objUrl+')','background-size':'100% 100%'})
			$(".getImgInfo").attr('src',objUrl) ;
			$('.promptInfo').hide();
		    $(".getImgInfo").on("load",function(){
		        var w = $(this).width();
		        var h = $(this).height();
		        var cw = $('#container').css('width');
		        var p = parseInt(h) / parseInt(w) * parseInt(cw);
		        $('#container').css({'height': p});
		    }); 
		}
		//uploadFile(uuid);
	}); */
	/* function uploadFile(uuid){
		//上传图片
		$.ajaxFileUpload({
	        url: '${ctx}/product/uploadImg?uuid='+uuid,//用于文件上传的服务器端请求地址
	        secureuri: false,//一般设置为false
	        fileElementId: "imgFileInput",//文件上传空间的id属性  <input type="file" id="file" name="file" />
	        dataType: 'text',//返回值类型 一般设置为json
	        success: function (data, status) //服务器成功响应处理函数
	        {
	        	alert(JSON.stringify(data));
	        },
	        error: function (data, status, e)//服务器响应失败处理函数
	        {
	        	
	        }
	    });
	} */
	function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	} 
</script>